<template>
  <div style="padding: 10px; display: flex; flex-direction: column; height: 100%;">
      <el-form ref="patrolrouteFormRef" :model="form" label-width="100px" style="display: flex; flex-direction: column;">
        <el-form-item label="路线名称" prop="patrolRouteName">
          <el-input v-model="form.patrolRouteName" placeholder="请输入路线名称" disabled />
        </el-form-item>
        <el-form-item label="路线描述" prop="patrolRouteDesc">
          <el-input v-model="form.patrolRouteDesc" placeholder="请输入路线描述" disabled />
        </el-form-item>
        <el-form-item label="累计使用次数">
          <el-input v-model="form.accumulateNum" disabled />
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="form.createName" disabled />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.createTime" disabled />
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="patroltaskList" style="display: flex; flex: 1;">
        <el-table-column v-if="false" label="主键" align="center" prop="cameraPatrolRouteId" />
        <el-table-column label="巡视任务名称" align="center" prop="patrolTaskName" />
        <el-table-column label="开始时间" align="center" prop="startTime" />
        <el-table-column label="结束时间" align="center" prop="endTime" />
        <el-table-column label="状态" align="center" prop="cameraPatrolTaskStatus">
          <template #default="scope">
            <dict-tag :options="camera_patrol_task_status" :value="scope.row.cameraPatrolTaskStatus" />
          </template>
        </el-table-column>
        <el-table-column label="执行人" align="center" prop="executeUserName" />
        <el-table-column label="创建人" align="center" prop="createByName" />
      </el-table>
      <pagination v-model:page="dataTask.queryParams.pageNum" v-model:limit="dataTask.queryParams.pageSize" :total="total" @change="getTaskList" />
      <div style="height: 70px; display: flex; justify-content: center; align-items: end;">
        <el-button @click="emit('close')">关 闭</el-button>
      </div>
  </div>
</template>

<script setup name="patrolroute" lang="ts">
import { getpatrolroute } from '@/api/security/video-patrol/camera-patrol-route';
import { patrolrouteQuery, patrolrouteForm } from '@/api/security/video-patrol/camera-patrol-route/types';
import { listcameraPatrolTask } from '@/api/security/video-patrol/camera-patrol-task';
import { cameraPatrolTaskQuery, cameraPatrolTaskForm } from '@/api/security/video-patrol/camera-patrol-task/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { camera_patrol_task_status } = toRefs<any>(proxy?.useDict('camera_patrol_task_status', 'clock_flag'));

const loading = ref(true);
const total = ref(0);
const patrolrouteFormRef = ref<ElFormInstance>();

const initFormData: patrolrouteForm = {
  cameraPatrolRouteId: undefined,
  patrolRouteName: undefined,
  patrolRouteDesc: undefined,
  cameraIdS: undefined,
  createName: undefined,
};
const data = reactive<PageData<patrolrouteForm, patrolrouteQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    patrolRouteName: undefined,
    patrolRouteDesc: undefined,
    params: {}
  },
  rules: {}
});

const { form } = toRefs(data);

const props = defineProps({
  cameraPatrolRouteId: Number,
});

const dataTask = reactive<PageData<cameraPatrolTaskForm, cameraPatrolTaskQuery>>({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    cameraPatrolRouteId: undefined,
    params: {}
  },
  rules: {}
});

const emit = defineEmits(['close']);

/**详情 */
let patroltaskList = ref([]);
const patrolrouteInfo = async () => {
  const res = await getpatrolroute(props.cameraPatrolRouteId);
  Object.assign(form.value, res.data);
  dataTask.queryParams.pageNum = 1;
  dataTask.queryParams.cameraPatrolRouteId = props.cameraPatrolRouteId;
  const listcameraPatrolTaskRes = await listcameraPatrolTask(dataTask.queryParams).finally(() => { loading.value = false; });
  patroltaskList.value = listcameraPatrolTaskRes.rows;
  total.value = listcameraPatrolTaskRes.total;
  console.log('listcameraPatrolTaskRes', listcameraPatrolTaskRes);
};

/**详情分页操作 */
const getTaskList = async (currentPage: number, pageSize: number) => {
  dataTask.queryParams.pageNum = currentPage;
  const listcameraPatrolTaskRes = await listcameraPatrolTask(dataTask.queryParams);
  patroltaskList.value = listcameraPatrolTaskRes.rows;
};

onMounted(() => {
  patrolrouteInfo();
});
</script>
<style lang="scss" scoped>

</style>
